<script setup> 
import {defineProps, defineEmits} from 'vue';
// 定义props
const props = defineProps({
    // 按钮列表
    buttonList: {
        type: Array,
        required: true,
    },

    // 选中的按钮
    selectedBtn: {
        type: String,
        required: true,
    },
});

// 定义要触发的事件（数组/对象形式）
const emit = defineEmits(['select']);   // 数组形式：指定事件名

const handlerBtnClick = (key) => {
    emit('select', key);
}
</script>

<template>
    <div class="button-group">
        <el-button
          v-for="btn in buttonList"
          @click="handlerBtnClick(btn.key)" 
          :class="{'is-active': selectedBtn === btn.key}"
        >
            <img :src="selectedBtn === btn.key ? btn.icon.active : btn.icon.normal" alt="自定义图标" class="btn-icon"/>
            <strong>{{btn.text}}</strong>
        </el-button>
    </div>
</template>

<style scope>
.button-group {
    display: flex;
}
.btn-icon {
  width: 18px;
  height: 18px;
  margin-right: 6px;
}
.bar .el-button {
  font-size: 16px;
  height: 41px;
  color: #454545;
}
.bar .el-button.is-active {
  background-color: #D0E6FD;
  color: #4077FB;
}
</style>